<script setup lang="ts">
import pageLoading from "@/components/pageLoading/pageLoading.vue"
import serviceCard from '@/components/serviceCard/serviceCard.vue'
import { store } from '@/stores/allStores'
import { homeDisplaySystemNoticeApi, allMeiYeProject } from '@/api/meiye'
import { onMounted, ref } from 'vue'
import { getImage, toast } from '@/util/bussinessTool'
let homeDisplayList = ref()
let cardlist = ref()
let activeName = ref('')
let loadState = ref('loading')
const tabs = [
    { title: '综合排序', name: '' },
    { title: '价格', name: 'price' },
    { title: '销量', name: 'svc_times' },
    { title: '好评', name: 'star' }
]
interface displayList {
    data: {
        bannerList: [{
            image: string
        }]
    }
}
onMounted(() => {
    homeDisplaySystemNoticeApi({
        noticeSize: 0,
        bannerSize: 5
    }).then((res: displayList) => {
        homeDisplayList.value = res.data.bannerList
    }).catch(() => {
        toast('请检查网络状态')
    })
    loadState.value = 'loading'
    loadData()
})
function loadData() {
    allMeiYeProject({
        sortField: activeName.value
    }).then((res: { data: Array<any> }) => {
        cardlist.value = res.data
        loadState.value = cardlist.value.length > 0 ? 'done' : 'noData'
    }).catch(() => {
        loadState.value = 'erro'
        toast('请检查网络状态')
    })
}
function onChange() {
    loadData()
}

</script>

<template>
    <div class="home">
        <pageLoading :load-state="loadState" @refresh="loadData" class="padgeLoading">
            <template #default>
                <van-swipe :autoplay="3000" width="375px" :show-indicators="false" height="240px">
                    <van-swipe-item v-for="item in homeDisplayList" class="van-swipe-item">
                        <van-image width="100%" height="100%" fit="contain" :src="getImage(item.image)" />
                    </van-swipe-item>
                </van-swipe>
                <van-tabs @change="onChange" v-model:active="activeName" line-width="20px"
                    :color="store.common.themeColorValue" :title-active-color="store.common.themeColorValue">
                    <van-tab :border="true" v-for="item in tabs" :name="item.name" :title="item.title"></van-tab>
                </van-tabs>
                <div class="i-mb-15">
                    <serviceCard v-for="item in cardlist" :data="item" />
                </div>
            </template>
        </pageLoading>
    </div>
</template>
<style scoped>
.placeHolder {
    height: 50px;
    width: 100vw;
}

.home /deep/ .van-tabs__wrap {
    border-radius: 10px;
}

.padgeLoading {
    height: calc(100vh - 50px);
}

.my-swipe .van-swipe-item {
    width: 100%;
    height: 100%;
}

.van-tabs {
    margin: -40px 20px 0 20px;
}
</style>
